昨天確認了 Idea Note 第一版的畫面：一個輸入框、一個儲存按鈕，以及顯示筆記的區域。

看起來好像很簡單，但今天準備處理「新增筆記」時，我才發現自己以前其實沒有認真想過一件事：

按下儲存之後，輸入框裡的文字到底去了哪裡？

我原本很直覺地認為，只要取得輸入框的內容，再把它顯示到畫面上就好了。但仔細想想，這樣只是把文字放到網頁裡，還不能算是真正完成一則筆記。

先把新增筆記拆開來看

目前程式已經可以取得輸入框裡的文字。接下來需要處理的事情，大致可以拆成幾個步驟：

1. 使用者在輸入框輸入內容。
2. 按下儲存按鈕。
3. 程式取得輸入的文字。
4. 檢查內容是不是空白。
5. 建立一筆新的筆記資料。
6. 把筆記顯示在畫面上。
7. 清空輸入框。

原本只是一個「新增筆記」功能，拆開後才發現，中間其實有不少小問題。

例如使用者只輸入空白時，要不要讓他儲存？連續按兩次按鈕，會不會出現兩則一樣的筆記？新增完成後，最新的內容應該放在清單最上面，還是最下面？

這些問題都不算困難，但如果沒有先想清楚，之後很容易一邊寫、一邊修改。

畫面上的文字不等於資料

這是我今天重新釐清的一個觀念。

如果只是直接在網頁上增加一段文字，使用者看得到它，但程式不一定方便管理它。之後要加入編輯、刪除或搜尋功能時，也會比較麻煩。

所以每一則筆記不能只是一段文字，最好是一筆有結構的資料。

第一版暫時可以包含：

{
  id: 1,
  content: "這是一則剛剛想到的筆記",
  createdAt: "建立時間"
}

content 是筆記內容，createdAt 用來記錄建立時間，而 id 則像是每一則筆記自己的編號。

畫面上即使出現兩則完全相同的文字，只要它們的 id 不同，程式仍然能知道它們是兩筆不同的資料。未來按下刪除按鈕時，才不會不知道究竟要刪除哪一則。

先不要急著處理永久保存

目前我只打算先用陣列保存這些筆記，確認新增與顯示的流程可以正常運作。

不過，陣列裡的資料只會暫時存在。只要重新整理網頁，內容就會消失。

這顯然還不能算是一個真正能使用的筆記 App，但我決定先不急著一次處理所有問題。現在如果同時加入資料庫、帳號登入和雲端同步，範圍又會立刻變得很大。

我的順序會是：

先讓筆記出現在畫面上，再想辦法讓它在重新整理之後留下來。

今天的進度其實是把問題想清楚

今天沒有突然完成一個厲害的功能，也沒有寫出很多程式碼。

比較像是把「按下儲存按鈕」這件看似簡單的事拆開，確認資料從哪裡來、要用什麼形式保存，以及接下來會遇到哪些問題。

以前的我可能會直接開始寫，寫到一半才發現資料結構不夠用，再回頭修改。這次有 Codex 協助整理流程後，我比較能先看見後續的編輯與刪除功能會需要什麼。

下一篇，我會實際把輸入的內容加入筆記陣列，並嘗試將每一則筆記顯示在畫面上。